<template>
  <div style="background-color: #f0f2f5; padding: 0px">
    <PageHeader
      :breadcrumb="breadcrumb"
      style="background-color: white; padding: 24px; margin-bottom: 16px"
    />
    <!-- <a-row
      style="background-color: white; height: 300px; padding: 24px; margin-bottom: 16px;"
    >
      <span>统计</span>
    </a-row> -->
    <a-card
      title="每月数据录入量"
      bodyStyle="padding: 24px;"
      style="margin-bottom: 16px"
      :bordered="false"
    >
      <div class="statistics-chart">
        <ECharts :option="lineChartOption" />
      </div>
    </a-card>
    <a-card title="各项数据占比" bodyStyle="padding: 24px;" :bordered="false">
      <template #extra>
        <MonthDropDownSelector
          @change="onMonthChange($event)"
          style="margin: -12px 0"
        />
      </template>
      <div class="statistics-chart">
        <ECharts :option="pieChartOption" />
      </div>
    </a-card>
  </div>
</template>
<script>
import PageHeader from '../Common/PageHeader'
import MonthDropDownSelector from './MonthDropDownSelector'
import echarts from 'echarts'
import { h } from 'vue'
import { createComponent } from 'echarts-for-vue'

const seriesName = '数据录入量'

export default {
  name: 'Index',
  components: {
    PageHeader,
    MonthDropDownSelector,
    ECharts: createComponent({ echarts, h }),
  },
  data() {
    const data_index = [
      'subject',
      'experiment',
      'experimentalProgram',
      'experimentProcedure',
      'riddle',
      'sample',
      'macroOrganization',
      'microStructure',
      'chemicalProperties',
      'physicalProperties',
      'tensileMechanicalProperties',
      'compressingMechanicalProperties',
      'shearProperties',
      'bondProperties',
      'torsionalProperties',
      'fractureToughness',
      'frictionalWearProperties',
      'hardness',
      'serviceProperties',
    ]
    return {
      breadcrumb: [{ key: 1, title: '主页' }],
      lineData: [],
      pieData: [],
      monthKey: 0,
      data_index,
      lineChartOption: {},
      pieChartOption: {},
    }
  },
  mounted() {
    this.fetch()
  },
  methods: {
    fetch() {
      this.lineData = this.getInitLineData()
      this.pieData = this.getInitPieData()
      this.axios
        .get('home/statistics')
        .then((res) => {
          // console.log(res.data)
          const data = res.data
          for (let i = 0; i < this.data_index.length; ++i) {
            const index = this.data_index[i]
            const statisticsItems = data[index]
            for (let j = 0; j < statisticsItems.length; ++j) {
              const month = statisticsItems[j].month
              const count = statisticsItems[j].count
              this.lineData[month - 1] += count
              this.pieData[month - 1][i].value += count
            }
          }
          this.lineChartOption = this.getLineChartOption(this.lineData)
          this.pieChartOption = this.getPieChartOption(
            this.pieData[this.monthKey]
          )
          // console.log("lineData:", this.lineData);
        })
        .catch((error) => {
          console.log('Error', error)
        })
    },
    onMonthChange(key) {
      this.monthKey = key
      this.pieChartOption = this.getPieChartOption(
        this.pieData[key]
      )
      // console.log(this.pieData[key])
    },
    getInitLineData() {
      return [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
    },
    getInitPieData() {
      let result = []
      for (let i = 0; i < 12; ++i) {
        result.push([
          { name: '课题', value: 0 },
          { name: '实验信息', value: 0 },
          { name: '实验方案', value: 0 },
          { name: '实验过程', value: 0 },
          { name: '分析检测', value: 0 },
          { name: '样品信息', value: 0 },
          { name: '宏观形貌', value: 0 },
          { name: '微观组织', value: 0 },
          { name: '化学性能', value: 0 },
          { name: '物理性能', value: 0 },
          { name: '拉伸力学性能', value: 0 },
          { name: '压缩力学性能', value: 0 },
          { name: '剪切性能', value: 0 },
          { name: '弯曲性能', value: 0 },
          { name: '扭转性能', value: 0 },
          { name: '断裂韧性', value: 0 },
          { name: '摩擦磨损性能', value: 0 },
          { name: '硬度', value: 0 },
          { name: '服役性能', value: 0 },
        ])
      }
      return result
    },
    getLineChartOption(data) {
      const xData = [
        '1月',
        '2月',
        '3月',
        '4月',
        '5月',
        '6月',
        '7月',
        '8月',
        '9月',
        '10月',
        '11月',
        '12月',
      ]
      return {
        title: {
          text: '',
          left: 'center',
          textStyle: {
            color: '#000',
          },
        },
        legend: {
          left: 'left',
        },
        series: {
          type: 'line',
          name: seriesName,
          data: data,
          areaStyle: {},
          lineStyle: {
            type: 'solid',
          },
          smooth: 0.5,
        },
        xAxis: {
          type: 'category',
          data: xData,
          axisLine: {
            lineStyle: {
              color: '#000',
            },
          },
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#000',
            },
          },
        },
        tooltip: {
          formatter: function(params) {
            return (
              params.seriesName +
              '<br />' +
              xData[params.dataIndex] +
              ': ' +
              params.data
            )
          },
        },
      }
    },
    getPieChartOption(data) {
      return {
        title: {
          left: 'center',
          text: '',
          textStyle: {
            color: '#000',
          },
        },
        series: {
          type: 'pie',
          name: seriesName,
          data: data,
          itemStyle: {
            emphasis: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)',
            },
          },
        },
        legend: {
          left: 'left',
          orient: 'vertical',
        },
        tooltip: {
          formatter: '{a}<br />{b}: {c}({d}%)',
        },
      }
    },
  },
}
</script>

<style>
.statistics-chart {
  height: 400px;
}
</style>
